<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!--Includes-->
	<link href="css/mobiscroll.custom-2.5.4.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.5.4.min.js" type="text/javascript"></script>

    

    <script type="text/javascript">
        $(function () {
            var curr = new Date().getFullYear();
            var opt = {

            }
            opt.date = {preset : 'date'};
			opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.time = {preset : 'time'};
			opt.tree_list = {preset : 'list', labels: ['Region', 'Country', 'City']};
			opt.image_text = {preset : 'list', labels: ['Cars']};
			opt.select = {preset : 'select'};
			<!--Script-->
                var demo = "date";
                $(".demos").hide();
                demo = 'default';
                $("#demo_" + demo).show();
                $('#test_'+demo).val('').scroller('destroy').scroller($.extend(opt["date"], { theme: "android-ics light", mode: "mixed", display: "modal", lang: "" }));
        });
    </script>
</head>

<body>
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>

    <div class="content">
        

        <div id="demo_default" class="demos">
            <label for="test_default">Click here to try</label>
            <input type="text" name="test_default" id="test_default" />
        </div>
        
	<!--Html-->
    </div>
</body>
</html>
